<template>
  <div class="DetailNavBar">
    <nav-bar>
      <template #left>
        <div class="back" @click="back">
          <img src="@/assets/images/common/back.svg" alt="">
        </div>
      </template>
      <template #center>
        <div class="title" >
          <div class="title-item" 
          v-for="(item,index) in titles" 
          :class="{active: index == curertIndex}" 
          :key="index" 
          @click="titleClick(index)">{{item}}</div>
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";

export default {
  data() {
    return {
      titles:['商品','参数','评论','推荐'],
      curertIndex:0
    };
  },
  components: {
    NavBar
  },
  methods: {
    titleClick(index){
      this.curertIndex = index;
      this.$emit('titleClick',index)
    },
    back(){
      this.$router.go(-1)
    }
  }
};
</script>

<style lang='scss' scoped>
@import '@/assets/css/extend.scss'; //引入公共css类
.title{
  display: flex;
  .title-item{
    flex:1;
  }
  .active{
    @extend .zhu_color;
  }
}
.back{
  img{display: block;margin-top: 10px; margin-left: 10px;}
}
</style>